<template>
  <div class="max home_main">
    <my-header></my-header>
    <div class="cont home_cont" id="hopm">
      <div class="weui-navbar" v-if="isShow(['kindergarten'])">
        <div class="weui-navbar__item " :class="{'weui-bar__item_on':menu==='stu'}" @click="menu='stu'">
          学生统计
        </div>
        <div class="weui-navbar__item" :class="{'weui-bar__item_on':menu==='tea'}" @click="menu='tea'">
          老师统计
        </div>
      </div>
      <div class="date_select flex">
        <img @click="changeDate(0)" src="../../../static/img/icon31.png" alt="">
        <span @click="showSelect">{{option.defaultValue[0]}}-{{option.defaultValue[1]}}-{{option.defaultValue[2]}}</span>
        <img @click="changeDate(1)" src="../../../static/img/icon32.png" alt="">
        <my-select :option="option" v-if="selectDate" ref="selectDate" @on-change="change"></my-select>
      </div>
      <template v-if="menu==='stu'">
        <div class="home_block" v-if="isShow(['kindergarten'])">
          <div class="index_title flex">
            <img src="../../../static/img/icon29.png" alt="">
            幼儿概况
          </div>
          <div class="num_item flex">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #5CA9FD;"></span>
              幼儿总数
              <span class="fr num_p" style="">{{statics.studentCount}}人</span>
            </div>
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #5CA9FD;"></span>
              家长总数
              <span class="fr num_p">{{statics.kinsfolkCount}}人</span>
            </div>
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #5CA9FD;"></span>
              请假人数
              <span class="fr num_p">{{statics.leaveCount}}人</span>
            </div>
          </div>
          <div class="chart">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #5CA9FD;"></span>
              入园统计
            </div>
            <div class="num_item_1" style="width: 100%;">
              <span class="db_inline" style="width: 2rem;height: 0.6rem;background: #5CA9FD;"></span>
              未签到
            </div>
            <div id="enter" class="mychart"></div>
          </div>
          <div class="chart">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #5CA9FD;"></span>
              出园统计
            </div>
            <div class="num_item_2">
              <span class="db_inline" style="width: 2rem;height: 0.6rem;background: #5CA9FD;"></span>
              未离园
            </div>
            <div id="exit" class="mychart"></div>
          </div>
        </div>
        <div class="home_block" v-if="isShow(['kindergarten','classMaster'])">
          <div class="index_title flex">
            <img src="../../../static/img/icon30.png" alt="">
            幼儿晨检
          </div>
          <div class="num_item flex">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #7CD280;"></span>
              已检人数
              <span class="fr num_p" style="">{{statics.examStatics.hasExam}}人</span>
            </div>
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #7CD280;"></span>
              未检人数
              <span class="fr num_p">{{statics.examStatics.noExam}}人</span>
            </div>
          </div>
        </div>
        <div class="home_block" v-if="isShow(['kindergarten','classMaster'])">
          <div class="index_title flex" style="justify-content: space-between;">
            <div class="flex" style="align-items: center;">
              <img src="../../../static/img/icon18.png" alt="">
              请假名单
            </div>
            <span style="font-size: 1.2rem;">{{statics.leaveCount}}人</span>
          </div>
          <div class="num_item flex">
            <div class="num_item_2 tj" v-if="item.nameList.length>0" v-for="item in statics.leaveStaticsList">
              <div>
                <span class="db_inline icon_point fl" style="background: #F9BB2A;"></span>
                <span class="db_inline fr num_n">
								{{item.clazzName}}：{{item.nameList.join('、')}}
							</span>
              </div>
            </div>
            <div class="num_item_2 tl" v-else>
              暂无请假
            </div>
          </div>
        </div>
        <div class="home_block" v-if="isShow(['kindergarten'])">
          <div class="index_title flex" style="justify-content: space-between;">
            <div class="flex" style="align-items: center;">
              <img src="../../../static/img/icon14.png" alt="">
              离园申请
            </div>
            <span style="font-size: 1.2rem;">
							<router-link to="/studentApply">
								更多
							</router-link>
						</span>
          </div>
          <div class="num_item flex">
            <div class="num_item_2 tj" v-for="(item,index) in statics.outApplyStaticsList">
              <router-link :to="{path: '/stuApplyDetails',query:{id:item.id}}">
                <span class="db_inline icon_point fl" style="background: #9284D9;"></span>
                <span class="db_inline fl">
									{{item.name}}
								</span>
                <span class="db_inline fr">
									{{item.createTime}}
								</span>
              </router-link>
            </div>
            <div class="num_item_2 tl" v-if="statics.outApplyStaticsList&&statics.outApplyStaticsList.length==0">
              暂无申请
            </div>
          </div>
        </div>
        <template v-if="isShow(['kinsfolk'])">
          <!-- <template> -->
          <div class="home_block" v-if="payStatus.residue>0">
            <div class="index_title flex">
              <img src="../../../static/img/icon44.png" alt="">
              入园
            </div>
            <div class="num_item flex">
              <div class="num_item_2 tc" v-if="pickList&&pickList.length!=0">
                <table style="width: 100%;">
                  <tr>
                    <td class="stu_td_1">姓名</td>
                    <td class="stu_td_1">班级</td>
                    <td class="stu_td_1">入园时间</td>
                    <td class="stu_td_1">入园抓拍</td>
                  </tr>
                  <tr v-for="item in pickList" v-if="item.clazzName">
                    <td class="stu_td_2">{{item.studentName}}</td>
                    <td class="stu_td_2">{{item.clazzName}}</td>
                    <td class="stu_td_2">{{item.signTime.split(' ')[1]}}</td>
                    <td class="stu_td_2" @click="checkPic(item.studentAvatar)">查看</td>
                  </tr>
                </table>
              </div>
              <div class="num_item_2 tl" v-else>
                暂无记录
              </div>
            </div>
          </div>
          <div class="home_block" v-if="payStatus.residue>0">
            <div class="index_title flex">
              <img src="../../../static/img/icon43.png" alt="">
              出园
            </div>
            <div class="num_item flex">
              <div class="num_item_2 tc" v-if="outList&&outList.length!=0">
                <table style="width: 100%;">
                  <tr>
                    <td class="stu_td_1">姓名</td>
                    <td class="stu_td_1">班级</td>
                    <td class="stu_td_1">出园时间</td>
                    <td class="stu_td_1">出园抓拍</td>
                  </tr>
                  <tr v-for="(item,index) in outList">
                    <td class="stu_td_2">{{item.studentName}}</td>
                    <td class="stu_td_2">{{item.clazzName}}</td>
                    <td class="stu_td_2">{{item.signTime.split(' ')[1]}}</td>
                    <td class="stu_td_2" @click="checkPic(item.studentAvatar)">查看</td>
                  </tr>
                </table>
              </div>
              <div class="num_item_2 tl" v-else>
                暂无记录
              </div>
            </div>
          </div>
          <div class="home_block" v-if="payStatus.residue>0">
            <div class="index_title flex">
              <img src="../../../static/img/icon43.png" alt="">
              晨检
            </div>
            <div class="num_item flex">
              <div class="num_item_2 tc" v-if="reportList&&reportList.length!=0">
                <table style="width: 100%;">
                  <tr>
                    <td class="stu_td_1">姓名</td>
                    <td class="stu_td_1">班级</td>
                    <td class="stu_td_1">体检时间</td>
                    <td class="stu_td_1">异常项目</td>
                  </tr>
                  <tr v-for="item in reportList">
                    <td class="stu_td_2">{{item.name}}</td>
                    <td class="stu_td_2">{{item.clazzName}}</td>
                    <td class="stu_td_2">{{item.reportTime.split(' ')[1]}}</td>
                    <td class="stu_td_2" v-if="item.errorItem">{{item.errorItem}}</td>
                    <td class="stu_td_2" v-else>无</td>
                  </tr>
                </table>
              </div>
              <div class="num_item_2 tl" v-else>
                暂无记录
              </div>
            </div>
          </div>
        </template>
        <div class="home_block" v-if="isShow(['classMaster','kinsfolk'])">
          <div class="index_title flex" style="justify-content: space-between;">
            <div class="flex" style="align-items: center;">
              <img src="../../../static/img/icon40.png" v-if="access=='classMaster'" alt="">
              <img src="../../../static/img/icon41.png" v-else alt="">
              通知公告
            </div>
            <span style="font-size: 1.2rem;">
							<router-link to="/announcement">
								更多
							</router-link>
						</span>
          </div>
          <div class="num_item flex">
            <div class="num_item_2 tj" v-for="(item,index) in atList">
              <router-link :to="{path: '/announcementContent',query:item}">
                <span class="db_inline icon_point fl" style="background: #5CA9FD;" v-if="access=='classMaster'"></span>
                <span class="db_inline icon_point fl" style="background: #9284D9;" v-else></span>
                <span class="db_inline fl">
									{{item.title|ellipsis}}
								</span>
                <span class="db_inline fr">
									{{item.createTime}}
								</span>
              </router-link>
            </div>
            <div class="num_item_2 tl" v-if="atList.length==0">
              暂无公告
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="home_block">
          <div class="index_title flex">
            <img src="../../../static/img/icon9.png" alt="">
            教师概况
          </div>
          <div class="num_item flex">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #FF9959;"></span>
              在园人数
              <span class="fr num_p" style="">{{statics.teacherStatics.intCount}}人</span>
            </div>
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #FF9959;"></span>
              请假人数
              <span class="fr num_p">{{statics.teacherStatics.leaveCount}}人</span>
            </div>
          </div>
          <div class="chart">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #FF9959;"></span>
              迟到
            </div>
            <div class="num_item_2">
              <span class="db_inline" style="width: 2rem;height: 0.6rem;background: #FF9959;"></span>
              迟到
            </div>
            <div id="late" class="mychart"></div>
          </div>
          <div class="chart">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #FF9959;"></span>
              旷工
            </div>
            <div class="num_item_2">
              <span class="db_inline" style="width: 2rem;height: 0.6rem;background: #FF9959;"></span>
              旷工
            </div>
            <div id="absence" class="mychart"></div>
          </div>
          <div class="chart">
            <div class="num_item_1 tl">
              <span class="db_inline icon_point" style="background: #FF9959;"></span>
              早退
            </div>
            <div class="num_item_2">
              <span class="db_inline" style="width: 2rem;height: 0.6rem;background: #FF9959;"></span>
              早退
            </div>
            <div id="excused" class="mychart"></div>
          </div>
        </div>
        <div class="home_block">
          <div class="index_title flex" style="justify-content: space-between;">
            <div class="flex" style="align-items: center;">
              <img src="../../../static/img/icon42.png" alt="">
              请假名单
            </div>
            <span style="font-size: 1.2rem;">{{statics.teaLeaveList.length}}人</span>
          </div>
          <div class="num_item">
            <div class="num_item_2 tj">
              {{statics.teaLeaveList.join('、')}}
            </div>
            <div class="num_item_2 tl" v-if="statics.teaLeaveList&&statics.teaLeaveList.length==0">
              暂无请假
            </div>
          </div>
        </div>
      </template>
    </div>
    <my-foot tab="/home"></my-foot>
  </div>
</template>

<script>
  function echartFontSize(res) {
    let docEl = document.documentElement,
      clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 375;
    return res * fontSize;
  }

  function echartOption() {
    let option = {
      color: ['#78B8FF'],
      grid: {
        top: echartFontSize(20),
        left: echartFontSize(30),
        right: 0,
        bottom: echartFontSize(30)
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          fontSize: echartFontSize(12)
        }

      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: echartFontSize(14)
        }
      },
      series: [{
        data: [],
        type: 'bar',
        barWidth: echartFontSize(40),
        label: {
          show: true,
          position: 'top'
        }
      }]
    };
    return option
  }

  import myFoot from '@/components/Footer.vue'
  import chart from '@/components/charts.vue'
  import PileChart from '@/components/PileChart.vue'
  import mySelect from '@/components/select.vue'
  import wx from "weixin-js-sdk";

  export default {
    components: {
      myFoot,
      chart,
      PileChart,
      mySelect
    },
    data() {
      return {
        selectDate: false,
        option: {
          defaultValue: []
        },
        menu: 'stu',
        access: this.$Cookies.get('loginType'),
        atList: [],
        feedback: [],
        pickList: [],
        outList: [],
        reportList: [],
        statics: {
          leaveCount: 0,
          stuStatics: {
            enterCount: 0,
            inCount: 0,
            kinsfolkCount: 0,
            leaveCount: 0,
            notEnterCount: 0,
            notInCount: 0,
            studentCount: 0
          },
          examStatics: {
            hasExam: 0,
            noExam: 0
          },
          teacherStatics: {
            attendanceStatics: [],
            teaLeaveCount: 0,
            teacherTotal: 0
          },
          outApplyList: [],
          studentLeaves: [],
          teacherLeaves: [],
          feedbackList: [],
          monthStudentStatics: [],
          monthReportStatics: [],
          monthTeaStatics: [],
        },
        payStatus: {},
      }
    },
    filters: {
      ellipsis(value) {
        if (value.length > 9) {
          return value.substring(0, 9) + '...'
        } else {
          return value
        }
      }
    },
    methods: {
      isShow(access) {
        return access.indexOf(this.access) !== -1;
      },
      fetchKinsfolkStudentStatics() {
        this.$http.fetchKinsfolkStudentStatics({
          day: this.option.defaultValue.join('-')
        }).then(resp => {
          let data = resp.data;
          this.pickList = data.enterList;
          this.outList = data.outList;
          this.reportList = data.reportList;
          this.atList = data.noticeList;
        })
      },
      fetchAdminStatics() {
        this.$http.fetchAdminStatics({
          day: this.option.defaultValue.join('-')
        }).then(resp => {
          this.statics = resp.data;
          if (this.menu == 'stu') {
            this.renderChartStu();
          } else {
            this.renderChartTea();
          }
        })
      },
      fetchTeacherStatics() {
        this.$http.fetchTeacherStatics({
          day: this.option.defaultValue.join('-')
        }).then(resp => {
          this.statics = resp.data;
          this.atList = resp.data.noticeList;
        })
      },
      fix2(val) {
        if (val < 10) return '0' + val
        else return val
      },
      getPayStatus() {
        this.$http.getPayStatus().then(resp => {
          this.payStatus = resp.data;
        })
      },
      showSelect() { //显示时间选择框
        this.selectDate = true;
        this.$nextTick(() => {
          this.$refs.selectDate.showDatePicker();
        })
      },
      change(date) { //时间选择回调
        let month = date[1].value;
        let day = date[2].value;
        this.option.defaultValue = [date[0].value, this.fix2(month), this.fix2(day)];
        this.selectDate = false;
        // 重新获取数据
        this.initFn()
      },
      changeDate(type) { //前一天后一天
        let str = this.option.defaultValue.join('-');
        let ms = new Date(str).getTime();
        if (type) ms += 86400000;
        else ms -= 86400000;
        let time = new Date(ms);
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
        // 重新获取数据
        this.initFn()
      },
      renderChartStu() {
        // 获取id
        let enter = this.$echarts.init(document.getElementById('enter'));
        let exit = this.$echarts.init(document.getElementById('exit'));

        // 设置属性
        let enterOption = echartOption();
        enterOption.xAxis.data = this.statics.enterStatics.timeData;
        enterOption.series[0].data = this.statics.enterStatics.dataList;

        let exitOption = echartOption();
        exitOption.xAxis.data = this.statics.outerStatics.timeData;
        exitOption.series[0].data = this.statics.outerStatics.dataList;

        // 绘制图表
        enter.setOption(enterOption);
        exit.setOption(exitOption);

      },
      renderChartTea() {
        // 获取id
        let late = this.$echarts.init(document.getElementById('late'));
        let absence = this.$echarts.init(document.getElementById('absence'));
        let excused = this.$echarts.init(document.getElementById('excused'));

        // 设置属性
        let lateOption = echartOption();
        let absenceOption = echartOption();
        let excusedOption = echartOption();

        lateOption.xAxis.data = this.statics.teaLateStatics.timeData;
        lateOption.series[0].data = this.statics.teaLateStatics.dataList;
        lateOption.color = ['#FF9959']

        absenceOption.xAxis.data = this.statics.teaNeglectStatics.timeData;
        absenceOption.series[0].data = this.statics.teaNeglectStatics.dataList;
        absenceOption.color = ['#FF9959']

        excusedOption.xAxis.data = this.statics.teaLeaveEarlyStatics.timeData;
        excusedOption.series[0].data = this.statics.teaLeaveEarlyStatics.dataList;
        excusedOption.color = ['#FF9959']

        // 绘制图表
        late.setOption(lateOption);
        absence.setOption(absenceOption);
        excused.setOption(excusedOption);
      },
      initFn() {
        let loginType = this.access;
        if (loginType === 'kinsfolk') {
          this.fetchKinsfolkStudentStatics();
          this.getPayStatus();
        } else if (loginType === 'kindergarten') {
          this.fetchAdminStatics();
        } else {
          this.fetchTeacherStatics();
        }
      },
      checkPic(url) {
        if (!url) {
          return;
        }
        wx.previewImage({
          previewImage: url,
          urls: [url]
        })
      },
      getWxConfig() {
        let url = window.location.href;

        let _this = this;
        _this.$http.fetchWxConfig({
          url: url
        }).then(resp => {
          wx.config({
            // debug: true,
            appId: resp.data.appId,
            timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
            signature: resp.data.sign, // 必填，签名
            jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
          });
        })
      },
    },
    watch: {
      menu() {
        this.initFn();
      }
    },
    created() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
    },

    mounted() {
      this.initFn();
      this.getWxConfig();
    }
  }
</script>

<style scoped>
  .home_cont {
    color: #0D0D0D !important;
    background: #F5F5F5
  }

  .situation-box {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .situation-titl {
    font-size: 1.8rem;
    width: 100%;
    padding: 0.5rem 0;
    background: #F7F7F7;
  }

  .situation-item {
    position: relative;
    border: 1px solid #2aa7e1;
    box-sizing: border-box;
    width: 100%;
    margin: 1.5rem 0;
    padding: 3rem 1rem 1rem 1rem;
  }

  .situation-item-notitl {
    padding: 1rem;
  }

  .situation-item span,
  .situation-item li {
    color: #2c3e50;
  }

  .situation-item-titl {
    position: absolute;
    top: -1.2rem;
    background: #2aa7e1;
    color: #fff;
    padding: 0 1rem;
  }

  .situation-item li {
    padding: 1rem;
    list-style: square;
    box-sizing: border-box;
  }

  .no-style {
    list-style: none !important;
  }

  .home-badge {
    margin-right: 1rem;
    display: none;
  }

  .no-style .home-badge {
    display: inline-block;
  }

  .msg-titl {
    line-height: 3.2rem;
  }

  .leave-name {
    width: 100%;
    margin: auto;
    flex-wrap: wrap;
  }

  .leave-name span {
    width: 25%;
    text-align: center;
    padding: 0.5rem 0;
  }

  .count-table td {
    padding: 0.5rem 0;
    font-size: 1.4rem;
  }

  .count-table tr {
    border-bottom: 1px solid #D9D9D9;
  }

  .home_block {
    width: calc(100% - 2rem);
    margin: auto;
    padding: 1rem;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  .index_title {
    font-size: 1.6rem;
  }

  .index_title img {
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
  }

  .num_item {
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .num_item_1 {
    margin: 0.5rem 0;
    width: 50%;
    font-size: 1.2rem;
  }

  .num_item_2 {
    margin: 0.5rem 0;
    width: 100%;
    font-size: 1.2rem;
    line-height: 2.2rem;
  }

  .num_p {
    padding-right: 2rem;
    line-height: 2.2rem;
  }

  .num_n {
    width: calc(100% - 2rem);
  }

  .icon_point {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.5rem;
  }

  .date_select {
    font-size: 1.4rem;
    margin: 1rem 0;
    justify-content: center;
  }

  .date_select img {
    height: 1.4rem;
    margin: 0 2rem;
  }

  .mychart {
    width: 100%;
    height: 250px;
  }

  .stu_td_1 {
    padding-bottom: 10px;
  }

  .stu_td_2 {
    border-top: 1px solid #ECECEC;
    padding-top: 10px;
  }
</style>
